<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 你好世界 -->
        <h1>{{msg}}</h1>

        <com :title="msg">
            <!-- 动态插槽名称 -->
            <!-- <template #[str]>
                <div>
                    内容
                </div>
            </template> -->

            <template #header>
                <div>
                    <!-- 你好世界 -->
                    头部内容 - <h1>{{msg}}</h1>
                </div>
            </template>
            <!--  #default="data" 接收插槽传值 -->
            <template #default="data">
                <div>
                    主体内容
                    <!-- 想要将 你好中国 显示在这里,可以使用插槽传值 -->
                    <!-- 插槽传值也叫作用域插槽，所有的值都会传到 data 中 -->
                    <h2> {{ data.message }} -- {{ data.count }} </h2>
                    <hr>
                </div>
            </template>
            <template v-slot:footer>
                <div>
                    页脚内容
                </div>
            </template>
        </com>
    </div>
</body>

<template id="com">
    <div>
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot :message="msg" :count="100"></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
            <hr>
            <!-- 你好中国 -->
            <h5> {{msg}} </h5>
            <!-- 想将 你好世界 显示在这里,可以通过 props 传递 -->
            <h5> {{title}} </h5>
        </footer>
    </div>
</template>

<script>
    const app = {
        data() {
            return {
                str: 'header',
                msg: '你好世界'
            }
        },
        methods: {},
        components: {
            com: {
                template: '#com',
                props: ['title'],
                data() {
                    return {
                        msg: '你好中国'
                    }
                },
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>